<template>
  <!-- 头部顶部栏组件 -->
  <div class="headerTop">
    <el-card class="box-card">
      <el-row :gutter="20" class="my-3">
        <el-col :span="4">
          <button
            @click="delAllSelection"
            type="button"
            class="el-button handle-del el-button--primary"
          >
            <i class="el-icon-delete"></i>
            <span>批量删除</span>
          </button>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-input
              @keyup.enter.native="search"
              placeholder="请输入搜索的内容"
              v-model.trim="searchValue"
              clearable
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="search"
              ></el-button>
            </el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <slot name="add">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="increase">
                <i class="el-icon-plus"></i>
                <span>添加</span>
              </el-button>
            </div>
          </slot>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    searchContent: {
      type: String,
    },
  },
  watch: {
    searchContent: function(val) {
      this.searchValue = val
    },
  },
  data() {
    return {
      searchValue: '',
    }
  },
  methods: {
    delAllSelection() {
      this.$emit('delAllSelection')
    },
    increase() {
      this.$emit('increase')
    },
    search() {
      this.$emit('search', this.searchValue)
    },
  },
}
</script>

<style></style>
